<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 写入组件 -->
      <div>
        <input
          type="text"
          v-model="product.name"
          placeholder="请输入商品名字"
        />
        <input type="text" v-model="product.price" placeholder="请输入单价" />
        <input
          type="number"
          v-model="product.count"
          placeholder="请输入商品数量"
        />
        <button @click="addCat">加入购物车</button>
      </div>
      <!-- 购物车列表 -->
      <div>
        <h3>购物车列表</h3>
        <table border="1" width="500">
          <thead>
            <tr>
              <th>商品名字</th>
              <th>单价</th>
              <th>数量</th>
              <th>小计</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in cats">
              <td>{{item.name}}</td>
              <td>{{item.price}}</td>
              <td>{{item.count}}</td>
              <td>{{item.price * item.count}}</td>
              <td><button @click="cats.splice(index,1)">删除</button></td>
            </tr>
          </tbody>
        </table>
        <h3>总价:{{total()}}</h3>
      </div>
    </div>
  </body>
</html>
<!-- 快捷键  代码格式化 alt+shift+f  复制一行  alt+shift+上/下键 复制多行 -->
<script>
  let app = new Vue({
    el: "#app",
    data: {
      //存放购物车的数据
      cats: [],
      //商品
      product: {
        // id:1,
        // name:"商品1",
        // price:100,
        // count:1
      },
    },
    methods: {
      //计算总计
      total() {
        //reduce()方法 累加 pre 累加项   0 初始值
        return this.cats.reduce(
          (pre, item) => pre + item.price * item.count,
          0
        );
      },
      addCat() {
        //判断购车z中是否已经存在此商品
        let index = this.cats.findIndex(
          (item) => item.name == this.product.name
        );
        if (index === -1) {
          //购物车中没有此商品
          this.cats.push({
            name: this.product.name,
            price: parseFloat(this.product.price),
            count: parseInt(this.product.count),
          });
        } else {
          //购物车中有此商品 更新商品数量
          this.cats[index].count += parseInt(this.product.count);
        }
        this.product = {};
      },
    },
  });
</script>
